import React from 'react'
import {
  View,
  StyleSheet,
  Text, ScrollView, Image
} from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import BaseJobNature from 'src/pageP/base/base-job-nature'
import NextButton from 'src/components/button/NextButton'

import { connect } from 'react-redux'
import { UPDATE_FIRST_USERINFO_C_ACTION } from '../first-user-info/store/action'

const mapDispatchToProps = dispatch => ({
  updateCFirstUserInfoState (payload) {
    dispatch(UPDATE_FIRST_USERINFO_C_ACTION(payload))
  }
})
@connect(
  ({ userinfo, CFirstUserInfoStore }) => ({
    userinfo,
    ...CFirstUserInfoStore
  }),
  mapDispatchToProps
)

class FirstJobNature extends BaseJobNature {
  constructor (props) {
    super(props)
    this.state = {
      ...this.state,
      workNature: this.props.workNature
    }
  }

  renderStepView () {
    return (<View style={styles.jobNatureIndexView}>
      <Text style={styles.jobNatureIndex}>1</Text>
      <Text style={styles.jobNatureTotal}>/3</Text>
    </View>)
  }

  renderBottomBtn () {
    const { workNature } = this.state
    const workNatureValue = workNature && workNature[0]
    return (
      <NextButton style={styles.nextButton} title="下一步" enable={!!workNatureValue} onPress={this.nextButtonClick}/>
    )
  }

  /**
   * 下一步
   * @private
   */
  nextButtonClick = () => {
    const { workNature } = this.state
    const workNatureValue = workNature && workNature[0]
    if (!workNatureValue) {
      return
    }
    const {
      navigation, updateCFirstUserInfoState
    } = this.props
    updateCFirstUserInfoState({
      workNature: workNature,
      workCategory: null
    })

    navigation.navigate('CFirstJobArea')
  }
}
export default FirstJobNature

const styles = StyleSheet.create({
  jobNatureIndexView: {
    flexDirection: 'row',
    alignItems: 'flex-end'
  },
  jobNatureIndex: {
    color: '#999999',
    fontSize: ScaleT(20),
    fontWeight: '500'
  },
  jobNatureTotal: {
    color: '#999999',
    fontSize: ScaleT(16),
    fontWeight: '500'
  },
  nextButton: {
    position: 'absolute',
    bottom: ScaleS(20),
    left: ScaleS(32)
  }
})
